<template>
    <div>
        <mt-header fixed :title="title">
            <router-link to="/" slot="left">
                <mt-button icon="back"></mt-button>
            </router-link>
        </mt-header>
        <div class="fix-header novel-header" title="">
            <img :src="novel.cover" :onerror="errorImg" class="cover">
            <div class="novel-info">
                <span class="novel-info-title">
                    {{novel.title}}
                </span>
                <div class="novel-info-style">
                    <span class="novel-info-auth">{{novel.auth}}</span>| {{novel.style}}
                </div>
                <div class="novel-read">
                    <mt-button @click.native="read" type="primary" size="small" plain>{{button_text}}</mt-button>
                </div>
            </div>
        </div>
        <span class="novel-intro" v-html="novel.introduction"></span>
    </div>
</template>

<style lang="css" rel="stylesheet/css">
    .fix-header {
        margin-top:55px;
    }
    .novel-chapter {
        height: 38px;
        padding:0px 15px;
        line-height: 38px;
        border-top: 1px solid #eee;
    }
    .novel-chapter a, .novel-chapter a:hover {
        color:#1F2D3D;
        display:block;
        font-size:15px;
        width:100%;
        height:100%;
        overflow:hidden;
    }
    .novel-header {
        height:120px;
    }
    .novel-header .cover {
        height:100px;
        width:73px;
        margin:0px 10px;
        float:left;
    }
    .novel-info {
        float:left;
    }
    .novel-info .novel-info-title {
        width:100%;
        height:20px;
        line-height:20px;
        font-size:15px;
        font-weight:600;
    }
    .novel-info .novel-info-style {
        height:20px;
        line-height:20px;
        margin-top:6px;
    }
    .novel-info .novel-info-auth {
        color:#FF8000;
    }
    .novel-header .novel-info {
        padding:4px;
    }
    .novel-header .novel-read {
        margin-top:15px;
    }
    .novel-header .novel-read button {
        margin-right:10px;
    }
    .novel-intro {
        display:block;
        line-height:22px;
        padding:0px 5px;
        font-size:16px;
    }
</style>

<script type="text/babel">
    import HeaderComponent from './header.vue'
    import { Indicator } from 'mint-ui'
    export default{
        data(){
            return{
                novel:{
                    title: "",
                    auth: "",
                    introduction: "",
                    cover: "",
                    style: "",
                    id: 0,
                    first_cid: 0 ,
                },
                novel_index: 0,
                chapters: [],
                title: "加载中...",
                button_text:"开始阅读",
                back: false,
                back_url: "",
                errorImg: 'this.src="http://spider-img.nightc.com/cover.jpg"',
            }
        },
        created () {
            this.fetch()
        },
        components:{
            HeaderComponent,
        },
        methods: {
            read: function() {
                this.$router.push("/chapter/" + this.$route.params.id +"/"+ this.novel_index)
            },
            afterFetch() {
                var _this = this
                var id = _this.$route.params.id
                _this.title = _this.novel.title
                var bookmark = localStorage["novel_mark_id_" + _this.$route.params.id]
                if (bookmark != undefined ) {
                    _this.button_text = "继续阅读"
                    _this.novel_index = parseInt(bookmark)
                }
            },
            fetch: function() {
                var _this = this
                var id = _this.$route.params.id
                if (id <= 0) {
                    Indicator.close()
                    console.log("error novel_id")
                    // todo 跳转到列表页
                }
                var novelCache = localStorage["novel_cache_info_"+id]
                if (typeof(novelCache) != 'undefined') {
                    _this.novel = JSON.parse(novelCache)
                    this.afterFetch()
                } else {
                    Indicator.open({
                        text: '拼命加载中n(*≧▽≦*)n...',
                        spinnerType: 'fading-circle'
                    });
                    _this.$http.get("https://novel.nightc.com/v1/novel/" + id).then((response) => {
                        var body = response.body
                        if (typeof(body.code) != 'undefined' && body.code == 0) {
                            _this.novel = body.data
                            _this.novel.first_cid = body.first_cid
                            localStorage["novel_cache_info_"+id] = JSON.stringify(_this.novel)
                            this.afterFetch()
                        } else {
                            console.log(body.data)
                        }
                        Indicator.close()
                    },() => {
                        console.log("error")
                    })
                }
            }
        }
    }
</script>
